<template>
  <view class="myPage">
    <common-header :isCanBack="true" titleName=" " :className="headerClassName"></common-header>
    <view class="container"  v-if="info.id">
      <image class="top-img" :src="img_baseUrl + info.coverImgPath"></image>
      <view class="details">
        <text class="title">{{ info.title }}</text>
				<view class="tit_items">
					<text>{{ info.createTime }}</text>
				</view>
        <view class="discription">
          <mp-html :content="info.articleText" style="font-size: 28rpx; color: #4d4d4d; line-height: 48rpx; font-weight: 400;"/>
        </view>
				<!-- <view class="btns" :style="{ paddingBottom: marginTop }">
					<view class="btn_rt">
						<uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" absolute="rightTop"
							size="small" max-num="999">
							<image :src="`${img_baseUrl}/statics/std/static/dianzan1.png`">
						</uni-badge>
					</view>
					<view class="btn_rt">
						<uni-badge class="uni-badge-left-margin" :inverted="true" text="1230" type="info" absolute="rightTop"
							size="small" max-num="999">
							<image :src="`${img_baseUrl}/statics/std/static/xingxing1.png`">
						</uni-badge>
					</view>
				</view> -->
      </view>
    </view>
    <action-bar :optionData="info" type='1' viewPath="/page_index/scenery/detail"></action-bar>
  </view>
</template>

<script>
  import commonHeader from '@/components/commonHeader.vue';
  import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html';
  import actionBar from '@/components/actionBar.vue';
	import {requestGet} from "@/utils/request";
  export default {
    components: {commonHeader,mpHtml,actionBar},
    data() {
      return {
        headerClassName: "",
        info: {},
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      };
    },
		onLoad: function (options) {
		    console.log(options, 'options~~~~')
		    const id = options.id
		    if (id) {
		        this.id = id
		    }
		},
    onShow(){
      this._getDetail()
    },
    methods: {
			_getDetail() {
			    requestGet(`/home/content/detail/${this.id}`,{},"/baseplatform")
			        .then((res) => {
			            if (res.code === 200) {
                    res.data.articleText = res.data && res.data.articleText ? res.data.articleText.split("\t").join("&nbsp;&nbsp;&nbsp;&nbsp;") : '';
			              this.info = res.data || {};
			            }
			        })
			        .catch((err) => console.log("错误了", err));
			},
			onPageScroll(e) {
			    if (e.scrollTop > 100) {
			        this.headerClassName = "headerClass";
			    } else {
			        this.headerClassName = "";
			    }
			},
    },
  };
</script>

<style lang="scss" scoped>
  .myPage{
    height: 100%;
    width: 100%;
    position: relative;
    .container{
      height: 100vh;
      width: 100%;
      .top-img{
        height: 750rpx;
        width: 100%;
      }
      .details{
        position: relative;
        top: -240rpx;
        height: auto;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 0rpx 0rpx;
        padding: 0 40rpx;
        .title{
          display: inline-block;
          font-size: 48rpx;
          font-weight: 700;
          color: rgba(0,0,0,0.8);
          line-height: 68rpx;
          margin: 48rpx 0 12rpx;
        }
				.tit_items {
					text {
						box-sizing: border-box;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.5);
						margin-top: 12rpx;
					}
				}
        .position{
          width: 670rpx;
          height: 120rpx;
          // background: url(https://ltjtjingquguanli.com/statics/std/static/introduction-detail-position-bg.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          .left{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            margin-left: 24rpx;
            text:first-child{
              font-size: 32rpx;
              font-weight: 700;
              color: #5F6F86;
              line-height: 48rpx;
              margin-bottom: 8rpx;
            }
            text:last-child{
              font-size: 24rpx;
              font-weight: 400;
              color: #777F8F;
              line-height: 32rpx;
            }
          }
          .right{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-right: 32rpx;
            width: 144rpx;
            height: 64rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
            border-radius: 32rpx 32rpx 32rpx 32rpx;
            image{
              height: 32rpx;
              width: 32rpx;
              margin-right: 8rpx;
            }
            text{
              font-size: 28rpx;
              font-weight: 400;
              color: #2187FF;
              line-height: 32rpx;
            }
          }
        }
        .discription{
          width: 100%;
          height: auto;
          margin: 48rpx 0 0;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.7);
					line-height: 48rpx;
        }
				
				.btns {
					position: fixed;
					bottom: 40rpx;
					right: 40rpx;
					width: 264rpx;
					background: #FFFFFF;
					display: flex;
					justify-content: center;
					box-sizing: border-box;
					padding-left: 32rpx;
					padding-right: 32rpx;
					padding-top: 16rpx;
					border-radius: 45rpx;
				
				
				
					.btn_rt {
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;
				
						image {
							width: 64rpx;
							height: 64rpx;
						}
					}
				}
      }
    }
  }
</style>